Faceting হল ডেটা ভিজুয়ালাইজেশনের একটি কৌশল, যা ডেটার বিভিন্ন সাবসেটের জন্য একাধিক চার্ট তৈরি করে। এটি ডেটার একাধিক ভেরিয়েবল বা ক্যাটাগরি বিশ্লেষণ করার জন্য খুবই উপকারী। গুগল চার্টে Multiple Variables এর জন্য Faceting করার মাধ্যমে আপনি একাধিক ভেরিয়েবলের ভিত্তিতে একাধিক চার্ট তৈরি করতে পারেন, যাতে একই ডেটাসেটের মধ্যে বিভিন্ন সম্পর্ক বা প্যাটার্ন বিশ্লেষণ করা সহজ হয়।
গুগল চার্টে Faceting Techniques ব্যবহার করে, আপনি Multiple Variables এর জন্য আলাদা আলাদা গ্রাফ তৈরি করতে পারেন এবং একাধিক ভেরিয়েবলের উপর ভিত্তি করে ডেটা বিশ্লেষণ করতে পারেন। এতে ডেটার ভিন্ন ভিন্ন দিকগুলির মধ্যে সম্পর্ক দেখতে সুবিধা হয়।
১. Faceting with Multiple Variables in Google Charts
গুগল চার্টে Faceting কৌশলটি সাধারণত একাধিক প্লট তৈরি করে, যেখানে একাধিক ভেরিয়েবলের মানের উপর ভিত্তি করে গ্রাফের উপস্থাপন করা হয়। একাধিক ভেরিয়েবল এবং সাবসেটের জন্য গুগল চার্টে একাধিক চার্ট তৈরি করতে google.visualization প্যাকেজ ব্যবহার করা যেতে পারে। এখানে, আমরা দেখব কিভাবে Multiple Variables এর জন্য faceting করতে হয়।
উদাহরণ: Faceting for Multiple Variables
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var data = google.visualization.arrayToDataTable([
['Year', 'Product A', 'Product B', 'Product C'],
['2015', 1000, 400, 700],
['2016', 1170, 460, 800],
['2017', 660, 1120, 400],
['2018', 1030, 540, 600]
]);
var options1 = {
title: 'Product A Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
};
var options2 = {
title: 'Product B Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
};
var options3 = {
title: 'Product C Sales',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'},
};
// Product A chart
var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(data, options1);
// Product B chart
var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
chart2.draw(data, options2);
// Product C chart
var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
chart3.draw(data, options3);
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- Multiple Variables এর জন্য তিনটি আলাদা চার্ট তৈরি করা হয়েছে:
Product A,Product B, এবংProduct Cএর বিক্রয়। - প্রতি চার্টের জন্য আলাদা title, hAxis এবং vAxis কাস্টমাইজ করা হয়েছে।
- Faceting এর মাধ্যমে ডেটা ভাগ করা হয়েছে এবং প্রতিটি ভেরিয়েবলের জন্য একটি গ্রাফ তৈরি করা হয়েছে।
২. Using CSS for Layout in Faceting
গুগল চার্টে Faceting করার সময়, আপনি গ্রাফগুলিকে একসাথে প্রদর্শন করতে CSS ব্যবহার করে layout কাস্টমাইজ করতে পারেন। এই কৌশলটি আপনাকে একাধিক চার্টকে একই পেজে সুন্দরভাবে সাজানোর সুযোগ দেয়।
উদাহরণ: CSS ব্যবহার করে Faceting Layout
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var data = google.visualization.arrayToDataTable([
['Year', 'Product A', 'Product B', 'Product C'],
['2015', 1000, 400, 700],
['2016', 1170, 460, 800],
['2017', 660, 1120, 400],
['2018', 1030, 540, 600]
]);
var options = {
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'}
};
var options1 = {title: 'Product A Sales'};
var options2 = {title: 'Product B Sales'};
var options3 = {title: 'Product C Sales'};
// Create charts
var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(data, options1);
var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
chart2.draw(data, options2);
var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
chart3.draw(data, options3);
}
</script>
<style>
.chart-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart-container div {
width: 30%;
}
</style>
</head>
<body>
<div class="chart-container">
<div id="chart_div1" style="height: 500px;"></div>
<div id="chart_div2" style="height: 500px;"></div>
<div id="chart_div3" style="height: 500px;"></div>
</div>
</body>
</html>
এখানে:
- CSS ব্যবহারের মাধ্যমে গ্রাফগুলো একসাথে পরপর display: flex; ব্যবহার করে সুন্দরভাবে সাজানো হয়েছে।
- gap: 20px; এর মাধ্যমে গ্রাফগুলোর মধ্যে কিছু ফাঁকা জায়গা রাখা হয়েছে।
৩. Faceting for Multiple Categories
Faceting ব্যবহার করে আপনি বিভিন্ন categories বা sub-categories এর জন্য একাধিক গ্রাফ তৈরি করতে পারেন। গুগল চার্টে, আপনি একটি ডেটাসেট থেকে একাধিক সাবসেট তৈরি করে, প্রতিটি সাবসেটের জন্য আলাদা গ্রাফ তৈরি করতে পারেন।
উদাহরণ: Faceting for Multiple Categories
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var data = google.visualization.arrayToDataTable([
['Year', 'Category A', 'Category B', 'Category C'],
['2015', 1000, 400, 700],
['2016', 1170, 460, 800],
['2017', 660, 1120, 400],
['2018', 1030, 540, 600]
]);
var options = {
hAxis: {title: 'Year'},
vAxis: {title: 'Sales'}
};
var options1 = {title: 'Category A Sales'};
var options2 = {title: 'Category B Sales'};
var options3 = {title: 'Category C Sales'};
// Category A chart
var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(data, options1);
// Category B chart
var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
chart2.draw(data, options2);
// Category C chart
var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
chart3.draw(data, options3);
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- Faceting কৌশল ব্যবহার করে
Category A,Category B, এবংCategory Cএর জন্য আলাদা চার্ট তৈরি করা হয়েছে।
সারমর্ম
Faceting এবং Small Multiples গুগল চার্টে Multiple Variables বিশ্লেষণের একটি শক্তিশালী কৌশল। এতে একাধিক সাবসেটের জন্য আলাদা গ্রাফ তৈরি করা হয়, যা ডেটার বিভিন্ন দিক দেখতে সাহায্য করে। CSS ব্যবহার করে গ্রাফগুলোর মধ্যে উপযুক্ত layout তৈরি করা যায়, এবং আপনি categories বা sub-categories অনুযায়ী গ্রাফগুলোকে গ্রুপ করতে পারেন। এটি ডেটার বিশ্লেষণকে আরও সহজ এবং কার্যকরী করে তোলে।
Read more
